import React, { Component } from 'react';
// import citys from './citys.json';
import styles from './Province.module.scss';
import Store from '../../redux/Store.js';
import Action from '../../redux/Action.js';
import Axios from '../../utils/request';
// const initial = [ '选', 'A', 'B', 'C', 'F', 'G', 'H', 'J', 'L', 'N', 'Q', 'S', 'T', 'X', 'Y', 'Z' ];

class Province extends Component {
	constructor(props) {
		super(props);
		this.state = {
			citys: [], //省市列表
			initial: [ '选' ], //省份首字母
			cityList: [], //选中省份中包含的城市
			activeIndex: 0, //点击大写字母索引
			scrollTop: 0 //页面滚动距离
			// areas: Store.getState().keyWord[0] //选择区域
			// location: '' //当前定位所在城市
		};
	}

	componentDidMount() {
		//获取省市列表
		Axios({
			method: 'get',
			url: '/temple/linkage'
		}).then((res) => {
			// console.log(res);
			this.setState({ citys: res.data.data }, () => {
				const { citys, initial } = this.state;
				let init = initial;
				for (let i = 0; i < citys.length; i++) {
					init.push(citys[i].initial);
				}
				this.setState({ initial: init });
			});
		});
		// window.addEventListener('scroll', this.onScrollChange);

	}

	//滚动事件
	onScrollChange = () => {
		let top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		// 	// let top=window.scrollY();
		console.log(top);
		// 	// let scroll = window.scrollY - 43;
		// 	// let current = 'a';
		// 	// let { data, title } = this.state;
		// 	// let length = 0;
		// 	// for (let i = 0; i < title.length; i++) {
		// 	// 	let currentTitle = title[i];
		// 	// 	if (i === title.length - 1) {
		// 	// 		current = currentTitle;
		// 	// 		break;
		// 	// 	}
		// 	// 	let nextTitle = title[i + 1];
		// 	// 	let currentIndex = data.indexOf(currentTitle);
		// 	// 	let nextIndex = data.indexOf(nextTitle);
		// 	// 	let sum = nextIndex - (currentIndex + 1);
		// 	// 	length = length + sum * 100;
		// 	// 	let number = length + (i + 1) * 48;
		// 	// 	if (scroll < number) {
		// 	// 		current = currentTitle;
		// 	// 		break;
		// 	// 	}
		// 	// }
	};
	//城市
	cityList = (init, code) => {
		// console.log(init, code);
		const { citys } = this.state;
		//遍历省市json数据
		for (let i = 0; i < citys.length; i++) {
			if (init === citys[i].initial) {
				for (let j = 0; j < citys[i].province.length; j++) {
					if (code === citys[i].province[j].code) {
						Store.dispatch(Action.show('city'));
						//给父组件(Header)传值
						this.props.show(citys[i].province[j]);
					}
				}
			}
		}
	};
	//点击锚点标记
	handleActive = (index) => {
		this.setState({ activeIndex: index });
	};
	//刷新城市定位
	updateCity = () => {
		// let _this = this;
		window.AMap.plugin('AMap.CitySearch', function () {
			var citySearch = new window.AMap.CitySearch()
			citySearch.getLocalCity(function (status, result) {
			  if (status === 'complete' && result.info === 'OK') {
				// 查询成功，result即为当前所在城市信息
				console.log(result);
				// redux管理当前城市
				Store.dispatch(Action.citynow(result.city));
			  }
			})
		  })
	};
	render() {
		// const { area } = this.state;
		const { citys } = this.state;

		return (
			<div className={styles.provinceBox} id="probox">
				<p className={styles.title} id="选">
					GPS定位
				</p>
				<div className={styles.nowAddress}>
					{Store.getState().citynow}
					<img src={require('../../image/tubiao@2x.png')} alt="" onClick={this.updateCity} />
				</div>
				<div className={`${styles.nowAddress} ${styles.all}`}>
					{/* {area} */}
					{Store.getState().keyWord.length === 0 ? (
						'全部'
					) : Store.getState().keyWord[0] === Store.getState().keyWord[1] ? (
						Store.getState().keyWord[0]
					) : (
						Store.getState().keyWord[0] + Store.getState().keyWord[1]
					)}
					<img src={require('../../image/gougou-2@2x.png')} alt="" />
				</div>
				<ul className={styles.list}>
					{citys.map((items, indexs) => {
						return (
							<li key={items + indexs} id={items.initial}>
								<p className={styles.title}>{items.initial}</p>

								<div className={styles.province}>
									{items.province.map((item) => {
										return (
											<p key={item.code} onClick={() => this.cityList(items.initial, item.code)}>
												{item.name}
											</p>
										);
									})}
								</div>
							</li>
						);
					})}
				</ul>
				<div className={styles.initial}>
					{this.state.initial.map((item, index) => {
						return (
							<a
								href={'#' + item}
								key={item + index}
								onClick={() => this.handleActive(index)}
								className={this.state.activeIndex === index ? styles.active : ''}
							>
								{item}
							</a>
						);
					})}
				</div>
			</div>
		);
	}
}

export default Province;
